<template>
	<section v-loading="listLoading">
		
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-input v-model="filters.orderId" placeholder="订单号"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="medium" v-on:click="handleCurrentChange(1)">查询</el-button>
				</el-form-item>
			</el-form>
		</el-col>
		<!--列表-->
		<el-table :data="users" stripe highlight-current-row @selection-change="selsChange" border style="width: 100%;">
			<el-table-column label="订单号" prop="orderInfo.businessOrderNo" min-width="150" align="center"></el-table-column>			
	        <el-table-column label="订单类型" prop="orderType" min-width="90" align="center">
	        	<template slot-scope="scope">
	        		<el-tag v-if="scope.row.orderType == 0" type="success" size="mini">普通订单</el-tag>
	        		<el-tag v-if="scope.row.orderType == 1" type="warning" size="mini">团购订单</el-tag>
	        	</template>
	        </el-table-column>
	        <el-table-column label="退款原因" prop="refundReason" min-width="150" align="center"></el-table-column>
	        <el-table-column label="退款金额" prop="refundPrice" min-width="80" align="center"></el-table-column>
	        <el-table-column label="退款积分" prop="refundPoints" min-width="80" align="center"></el-table-column>
	        <el-table-column label="补充描述" prop="remark" min-width="80" align="center"></el-table-column>
	        <el-table-column  label="图片" width="70" align="center">
	          <template slot-scope="scope">
	        	  <div v-if="scope.row.remarkPic == '' || scope.row.remarkPic == null">/</div>
	        	  <div v-else>
	        		  <el-button size="small" type="text" @click="handlePhoto(1,scope.row)">
	    			      <img :src="scope.row.remarkPic.split(',')[0]" style="width: 50px;height: 50px;object-fit: cover;border-radius: 5px;"/>
	    	    	  </el-button>
	        	  </div>
			    </template>
			</el-table-column>
			<el-table-column label="类型" min-width="80" align="center">
		    	<template slot-scope="scope">
		    		<span>{{scope.row.orderType===0?'仅退款' :'退货退款'}}</span>
		    	</template>
	        </el-table-column>
	        <el-table-column label="商品名称" prop="goodsInfo.name" min-width="80" align="center"></el-table-column>
	        <el-table-column label="商品图片" align="center" width="80">
                <template slot-scope="scope">
                	<div v-if="scope.row.goodsInfo && scope.row.goodsInfo.url">
                		<el-button size="small" type="text" @click="handlePhoto(0,scope.row.goodsInfo)">
            			    <img :src="scope.row.goodsInfo.url.split(',')[0]" style="width: 50px;height: 50px;object-fit: cover;border-radius: 5px;"/>
            	    	</el-button>
                	</div>
            	</template>
           </el-table-column>
           <el-table-column label="物流名称" prop="logisticsName" min-width="80" align="center"></el-table-column>
	        <el-table-column label="物流单号" prop="logisticsCard" width="140" align="center">
	        	<template slot-scope="scope">
            		<el-button size="small" type="text" @click="handleLogisticeInfo(scope.row)">{{scope.row.logisticsCard}}</el-button>
            	</template>
	        </el-table-column>
	        <el-table-column label="状态" min-width="80" align="center">
            	<template slot-scope="scope">
            		<span>{{scope.row.status===0?'审核中' :scope.row.status===1?'待退款' :scope.row.status===2?'已拒绝' :'退款成功'}}</span>
            		<!--status 0审核中  1待退款 2已拒绝  10退款成功-->
            	</template>
			</el-table-column>
			<el-table-column prop="createTime" label="申请时间" :formatter="formatDate"  min-width="140" align="center"></el-table-column>
		</el-table>
		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-pagination layout="prev, pager, next, jumper" @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="float:right;">
			</el-pagination>
		</el-col>
		
		<el-dialog :visible.sync="photoFormVisible" :close-on-click-modal="false" style="margin-top: -30px;">
    	  <el-carousel indicator-position="outside" height="600px">
            <el-carousel-item v-for="item in this.photoForm.photo.split(',')" :key="item.index">
                <img :src="item" style="max-width: 100%;max-height: 100%;display: block; margin: 0 auto;"/>
            </el-carousel-item>
          </el-carousel>
	    </el-dialog>
	    
	    <!--物流-->
		<el-dialog title="物流详情" :visible.sync="logsiFormVisible" :close-on-click-modal="false" width="500px">
			<div class="logistics">
				<div class="logisticsDetail">
				    <div class="logisticsDetailItem" v-for="(item,index) in logList">
				      <div class="logisticsDetailItemLeft">
				        <div v-if="index==0" class="activelogisticsDetailItemLeftPoint"></div>
				        <div v-else class="logisticsDetailItemLeftPoint"></div>
				        <div class="logisticsDetailItemLeftLine" v-if="index != list.length-1"></div>
				      </div>
				      <div class="logisticsDetailItemRight">
				      	<span v-if="index==0" class="activelogisticsDetailItemRightText">{{item.context}}</span>
				        <span v-if="index !==0" class="logisticsDetailItemRightText">{{item.context}}</span>
				        <span v-if="index==0" class="activelogisticsDetailItemRightText1">{{item.time}}</span>
				        <span v-if="index !==0" class="logisticsDetailItemRightText1">{{item.time}}</span>
				      </div>
				    </div>
				</div>
			</div>
		</el-dialog>
	</section>
</template>

<script>
	import { client } from '../../common/js/alioss'
	export default {
		data() {
			return {
				filters: {
					orderId: '',
					status: '',
				},
			    orderDetailVisible:false,
				data:{},
				users: [],
				option:[],
				list:[],
				total: 0,
				page: 1,
				pageSize: 10,
				listLoading: false,
				photoFormVisible: false,
				photoForm:{
					photo:''
				},
				logsiFormVisible:false,
			    logList:[],
			    logoData:{},
			}
		},
		methods: {
			dialogClose(){},
			selsChange: function (sels) {
				this.sels = sels;
			},
			//时间转换开始时间 
			formatDate(row, column) {
                let date = new Date(parseInt(row.createTime));
                let Y = date.getFullYear() + '-';
                let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-';
                let D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' ';
                let h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
                let m = date.getMinutes()  < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
                let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
                return Y + M + D + h + m + s;
            },
            zeroize(num) {
                return (String(num).length == 1 ? "0" : "") + num;
            },
            timestampFormat(timestamp) {
                var curTimestamp = parseInt(new Date().getTime() / 1000); //当前时间戳
                var timestampDiff = curTimestamp - parseInt(timestamp / 1000); // 参数时间戳与当前时间戳相差秒数
                var curDate = new Date(curTimestamp * 1000); // 当前时间日期对象
                var tmDate = new Date(parseInt(timestamp / 1000) * 1000); // 参数时间戳转换成的日期对象
                var Y = tmDate.getFullYear(),
                m = tmDate.getMonth() + 1,
                d = tmDate.getDate();
                var H = tmDate.getHours(),
                i = tmDate.getMinutes(),
                s = tmDate.getSeconds();
                return (Y + "-" + this.zeroize(m) + "-" + this.zeroize(d) + " " + this.zeroize(H) + ":" + this.zeroize(i) + ":" + this.zeroize(s));
            },
            
			handleCurrentChange(val) {
				this.page = val;
				this.getUsers();
			},
			//获取用户列表
			getUsers:function (){
				this.listLoading = true;
				let para = {
					page: this.page,
					limit: this.pageSize,
					orderId: this.filters.orderId,
					status: 10
				};
				
				this.$http.post('api/orderRefund/orderRefundList', this.qs.stringify(para)).then(data => {
					let  res = data.data;
					console.log(data);
					if (res.code !== 200) {
						this.$message({
							message: res.msg,
							type: 'error'
						});
					} else {
						this.total = res.data.totalNum;
						this.users = res.data.items;
						this.data = res.data;
						this.listLoading = false;
					}
				});
			},
			//显示图片页面
			handlePhoto: function (index, row) {
				this.photoFormVisible = true;
				console.log(row);
				
				if (index==0) {
					this.photoForm.photo = row.url;
				}else{
					this.photoForm.photo = row.remarkPic;
				}
			},
			//查看物流详情
		    handleLogisticeInfo(row){
		    	this.logsiFormVisible = true
		    	this.logList = []
		    	let params = {
		    		wayBillNum:row.logisticsCard,
		    		userId:row.userId
		    	}
		    	this.$http.post('api/goodsOrder/getlogisticsInfo', this.qs.stringify(params)).then(data => {
					let  res = data.data;
					console.log(data);
					if (res.code !== 200) {
						this.$message({
							message: res.msg,
							type: 'error'
						});
					} else {
						console.log(res)
					    var info = JSON.parse(res.data)
					    if (info.result==false) {
					    	this.logList.push({
					    		context:'暂无快递信息'
					    	})
					    }else{
					    	this.logList = info.data
					    }
					}
				});
		    },
		},
		mounted() {
			this.getUsers();
		}
	}

</script>
<style>
	
</style>
